<template>
	<div class="index"  style="padding-bottom: 1rem; min-height: 100vh;">
    <div style="background:url('../../../static/img/jiameng2.png') no-repeat;">
      <div style="padding: 0.3rem; font-size: 0.24rem;">
        <div class="flexc" style="justify-content: flex-end;">
          <div><img src="../../../static/img/g1.png" style="width: 0.38rem;" @click="goguanli()"></div>
          <div><img src="../../../static/img/g10.png" style="width: 0.38rem; margin-left: 0.3rem;" @click="show6=true"></div>
        </div>
        <div class="flexc">

          <div><img :src="all.img_url || 'https://file.91haoka.cn/gerenxitong/g3.png'" @click="go4('/shangchuantouxiang')" style="width: 1.5rem; height: 1.5rem; border-radius: 0.75rem; margin-right: 0.2rem;"></div>
          <div>
            <div>不维护！！！！！</div>
            <div style="font-size: 0.32rem; margin-bottom: 0.1rem;">{{user.name}}</div>
            <div style="font-size: 0.22rem; margin-bottom: 0.1rem;">当前店铺：{{all.store_name}}</div>
            <div style="font-size: 0.22rem; margin-bottom: 0.1rem;">手机号：{{user.mobile}}</div>
          </div>
        </div>
        <!-- //0guan -->
        <div v-if="all.level == 2 && dj.level_open == 1" style="border-radius: 20px 20px 0px 0px; margin-top: 0.3rem; background: linear-gradient(90.00deg, rgb(2, 12, 29) 2.536%,rgb(6, 26, 59) 100%); padding: 0.3rem;">
          <div class="flexc">
            <!-- 最多7级 -->
            <div><img :src="'https://file.91haoka.cn/gerenxitong/dj'+dj.level+'.png'" style="width: 0.7rem; margin-right: 0.3rem;"></div>
            <div style="width: 5.3rem;">
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div style=" width: 3rem; overflow: hidden; margin-bottom: 0.1rem;">
                  <div style="color: #fff; margin-bottom: 0.1rem;">{{dj.level_name}}</div>
                  <div style="color: #fff;">升级还需{{nextexp-dj.exp}}{{djrules.name}}</div>
                </div>
                <div style="border-radius: 50px; background: rgb(255, 223, 26); padding: 0.1rem 0.2rem; border-radius: 0.25rem;" @click="go4('/dengjiguize')">
                  了解等级 >
                </div>
              </div>
              <div style="width: 5.3rem; border-radius: 10px; background: rgb(255, 255, 255,0.2);  position: relative; height: 0.1rem; overflow: hidden;">
                <div :style="{width:5.3*dj.exp/nextexp +'rem'}" style="border-radius: 10px; background: rgb(255, 255, 255); z-index: 10; height: 0.1rem; position: absolute; left: 0; top: 0; "></div>
              </div>
            </div>
          </div>
        </div>
<!--        estimate_all_commission
        :
        "71979.00"
        sum_commission
        :
        "0.01"
        takeamount
        :
        "72828.00" -->
        <div v-if="all.level == 2 && dj.level_open == 1" style="padding: 0.3rem; background: #fff; border-radius: 0px 0px 20px 20px;background: linear-gradient(180.00deg, rgb(236, 243, 255) 1.561%,rgb(255, 255, 255) 39.753%,rgb(255, 255, 255) 100%);">
          <div class="flexbc">
            <div>
              <div style="margin-bottom: 0.1rem; color: #000;">已结算</div>
              <div style="margin-bottom: 0.2rem; font-size: 0.4rem; font-weight: bold; color: #000;">￥{{yongjin.sum_commission}}</div>
              <div style="color: #000;">预估结算：￥{{yongjin.estimate_all_commission}}</div>
            </div>
            <div>
              <div style="border-radius: 30px; background: rgb(227, 232, 241); color: rgb(2, 12, 29); font-weight: bold; padding:0.15rem 0.3rem;" @click="go5('/web/yongjin/yongjintixian')">申请提现</div>
              <div style="text-align: center; margin-top: 0.2rem; font-size: 12px;" @click="go6('/dingdanzhuangtai')"> 结算详情 ></div>
            </div>

          </div>
        </div>

        <div  v-if="all.level != 2  || dj.level_open == 0" style="padding: 0.3rem; background: #fff; border-radius: 15px;  margin-top: 0.3rem; background: linear-gradient(134.41deg, rgb(255, 184, 49) 1.91%,rgb(255, 132, 0) 100%,rgb(255, 191, 80) 100%);">
          <div class="flexbc">
            <div>
              <div style="margin-bottom: 0.1rem; color: #fff;">已结算</div>
              <div style="margin-bottom: 0.2rem; font-size: 0.4rem; font-weight: bold; color: #fff;">￥{{yongjin.sum_commission}}</div>
              <div style="color: #fff;">预估结算：￥{{yongjin.estimate_all_commission}}</div>
            </div>
            <!-- <div style="border-radius: 30px; background: rgb(92, 54, 0); color: #fff; font-weight: bold; padding:0.15rem 0.3rem;" @click="go5('/web/yongjin/yongjintixian')">申请提现</div> -->
            <div>
              <div style="border-radius: 30px; background: #fff; color: rgb(255, 145, 13); font-weight: bold; padding:0.15rem 0.3rem;" @click="go5('/web/yongjin/yongjintixian')">申请提现</div>
              <div style="text-align: center; color: #fff; margin-top: 0.2rem; font-size: 12px;"  @click="go6('/dingdanzhuangtai')">结算详情 ></div>
            </div>
          </div>
        </div>

        <div style="margin-top: 0.3rem;">
          <div class="flex" style="border-radius: 15px; text-align: center; background: linear-gradient(180.00deg, rgb(236, 243, 255) 1.561%,rgb(255, 255, 255) 39.753%,rgb(255, 255, 255) 100%); padding: 0.3rem 0rem;">
            <div style="flex: 1;">
              <div style=" position: relative; width: 0.5rem; margin: 0 auto; margin-bottom: 0.2rem; font-size: 0.28rem; color: rgb(2, 12, 29);">
                {{info.today_order_count}}
                <span style="position: absolute; top: -0.1rem; left: 0.4rem; border-radius: 10px; background: rgb(254, 61, 61); padding:0 0.1rem; color: #fff; font-size: 0.2rem;">{{info.inc_order_count}}</span>
              </div>
              <div style="color: rgb(120, 125, 133);">今日订单</div>
            </div>
            <div style="flex: 1;">
              <div style=" position: relative; width: 0.5rem; margin: 0 auto; margin-bottom: 0.2rem; font-size: 0.28rem; color: rgb(2, 12, 29);">
                {{info.total_order_count}}
                <!-- <span style="position: absolute; top: -0.1rem; left: 0.4rem; border-radius: 10px; background: rgb(254, 61, 61); padding:0 0.1rem; color: #fff; font-size: 0.2rem;">+{{info.total_order_count}}</span> -->
              </div>
              <div style="color: rgb(120, 125, 133);">累计订单</div>
            </div>
            <div style="flex: 1;">
              <div style=" position: relative; width: 0.5rem; margin: 0 auto; margin-bottom: 0.2rem; font-size: 0.28rem; color: rgb(2, 12, 29);">
                {{info.today_reseller_count}}
                <span style="position: absolute; top: -0.1rem; left: 0.4rem; border-radius: 10px; background: rgb(254, 61, 61); padding:0 0.1rem; color: #fff; font-size: 0.2rem;">{{info.inc_reseller_count}}</span>
              </div>
              <div style="color: rgb(120, 125, 133);">新增分销商</div>
            </div>
            <div style="flex: 1;">
              <div style=" position: relative; width: 0.5rem; margin: 0 auto; margin-bottom: 0.2rem; font-size: 0.28rem; color: rgb(2, 12, 29);">
                {{info.total_reseller_count}}
                <!-- <span style="position: absolute; top: -0.1rem; left: 0.4rem; border-radius: 10px; background: rgb(254, 61, 61); padding:0 0.1rem; color: #fff; font-size: 0.2rem;">+{{info.total_reseller_count}}</span> -->
              </div>
              <div style="color: rgb(120, 125, 133);">累计分销商</div>
            </div>
          </div>
        </div>
        <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: #fff; margin-top: 0.3rem;"  @click="go5('/web/shangpinguanli/zaishoushangpin')">
          <div class="flexc">
            <div><img src="../../../static/img/g5.png" style="width: 0.6rem; margin-right: 0.3rem;"></div>
            <div>
              <div style=" font-size: 0.28rem; margin-bottom: 0.1rem;">推广商品</div>
              <div style="color: rgb(120, 125, 133);">高额佣金赚不够</div>
            </div>
          </div>
          <div style="font-size: 0.3rem; color: rgb(120, 125, 133);">></div>
        </div>



        <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: #fff; margin-top: 0.3rem;" @click="gethaibao(1)">
          <div class="flexc">
            <div><img src="../../../static/img/g6.png" style="width: 0.6rem; margin-right: 0.3rem;"></div>
            <div>
              <div style=" font-size: 0.28rem; margin-bottom: 0.1rem;">推广海报</div>
              <div style="color: rgb(120, 125, 133);">发圈快速获客</div>
            </div>
          </div>
          <div style="font-size: 0.3rem; color: rgb(120, 125, 133);">></div>
        </div>

        <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: #fff; margin-top: 0.3rem;" @click="gethaibao(2)" v-if="all.last_level == 0 && all.reseller_inv_switch == 1">
          <div class="flexc">
            <div><img src="../../../static/img/g7.png" style="width: 0.6rem; margin-right: 0.3rem;"></div>
            <div>
              <div style=" font-size: 0.28rem; margin-bottom: 0.1rem;">邀请好友</div>
              <div style="color: rgb(120, 125, 133);">提升等级获得佣金</div>
            </div>
          </div>
          <div style="font-size: 0.3rem; color: rgb(120, 125, 133);">></div>
        </div>
      </div>
    </div>

    <footers></footers>
    <van-popup v-model="show" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; width: 6.6rem;">
        <canvas999 ref="canvas999"></canvas999>
      </div>


    	<!-- <img :src="haibao.store_poster" style="width: 100%;">
      <div @click="xiazai(haibao.store_poster)" class="flexcc" style="background: rgb(0, 90, 255); margin: 0.2rem; width: 4.6rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">保存</div>
   -->
    </van-popup>
    <van-popup v-model="show2" style="border-radius: 0.5rem;background: #fff !important;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; width: 6.6rem;">
        <img :src="haibao.inv_poster" style="width: 100%;">
        <div @click="xiazai(haibao.inv_poster)" class="flexcc" style="background: rgb(0, 90, 255); margin: 0.6rem auto 0; width: 4.6rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">保存</div>

      </div>
    </van-popup>

    <van-popup v-model="show5" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; ">
        <div ref="qrCodeUrl" class="qrCodeUrl"></div>
        <div style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);" @click="xiazai2">保存</div>
      </div>
    </van-popup>

    <van-popup v-model="show6" position="bottom" style=" background: transparent; padding:0 0.3rem;">
      <div @click="tuichu()" class="flexcc" style="background: #fff; width: 6.9rem; margin-bottom: 0.3rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.2rem; font-size: 0.31rem; color: rgb(2, 12, 29);">
        退出登录
      </div>
      <div @click="jiechu()" v-if="user.open_id" class="flexcc" style="background: #fff; width: 6.9rem; margin-bottom: 0.3rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.2rem; font-size: 0.31rem; color: rgb(2, 12, 29);">
        解除微信绑定
      </div>
    </van-popup>
	</div>
</template>

<script>
  import canvas999 from './zujian/canvas999.vue'
  import footers from './footers.vue'
  import * as qiniu from 'qiniu-js'
  import QRCode from 'qrcodejs2'
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
    components:{
      footers,canvas999
    },
		name: 'query',
		data() {
			return {
        show:false,
        show2:false,
        show5:false,
        show6:false,
        alls:"",
        all:"",
        user:"",
        djrules:"",
        dj:"",
        nextexp:0,
        allexp:0,
        yongjin:"",
        info:"",
        haibao:"",
        xxx:""
			}
		},
		created() {

		},

		mounted() {
      document.title = localStorage.getItem("store_title")
      this.getinfo()
      this.getyongjin()

		},


		methods: {
      go6:function(url){
        this.$router.push(url)
      },
      jiechu:function(){
        axios.post(`/api/wechat/unbind`,{open_id:this.user.open_id})
        	.then(response=> {
        		if (response.data.msg.code == 0) {
              vant.Toast('已解除微信绑定');
              this.tuichu()
        		}else{
              vant.Toast(response.data.msg.info);
            }
        	})
      },
      tuichu:function(){
        axios.post(`/agent/auth/logout`)
        	.then(response=> {
        		if (response.data.msg.code == 0) {
              this.$router.push('/index'+location.search)
        		}else{
              vant.Toast(response.data.msg.info);
            }
        	})
      },
      creatQrCode(url) {
        this.$refs.qrCodeUrl.innerHTML = ""
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: url, // 需要转换为二维码的内容
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      },
      go5:function(url){
        location.href = location.origin + url
      },
      base64ToBlob (code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new window.Blob([uInt8Array], {type: contentType});
      },
      getRandomChar:function(len = 15)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      uploadok: function(file,who) {
        let name = this.getRandomChar() + '.jpg'
        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)
                },
                complete(res){
                  location.href = 'https://gperson.gantanhaokeji.top/'+ res.key + '?attname='
                }
              }
              const observable = qiniu.upload(file,name, response.data.data.token, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },

      //手机版下载二维码最终方案  二维码转blob  上传到七牛   下载七牛地址
      xiazai2:function(){

        let canvas = this.$refs.qrCodeUrl.childNodes[0]
        let img = canvas.toDataURL('image/jpeg')
        let blob = this.base64ToBlob(img)  // 转码
        this.uploadok(blob)

      },
      xiazai:function(url){
        let a = document.createElement("a");
        a.href = url + '?attname='
        a.download = "海报图.jpg"
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      },
      gethaibao:function(t){
        axios.get('/agent/poster/info').then((response)=>{
          if (response.data.msg.code == 0) {
            if(response.data.data != null){
              this.haibao = response.data.data
              if(t == 1){
                this.show = true
              }
              if(t == 2){
                this.show2 = true
              }
            }else{
              if(t == 1){
                this.show5 = true
                this.$nextTick(()=>{
                  this.creatQrCode(window.location.origin + '/h5/index?shop_id='+window.btoa(JSON.parse(localStorage.getItem('user')).id))
                })
              }
              if(t == 2){

                let copyurl = ''
                axios.get('/agent/reseller/check-code').then((response)=>{
                	if (response.data.msg.code == 0) {
                    copyurl = window.origin+'/hou/login?'+encodeURIComponent(response.data.data);
                    axios.get('/agent/reseller/system/config/get').then((response)=>{
                    	if (response.data.msg.code == 0) {
                        if(response.data.data.distributor){
                          copyurl = copyurl + '&true'
                        }
                        console.log(copyurl)
                        this.show5 = true
                        this.$nextTick(()=>{
                          this.creatQrCode(copyurl)
                        })
                    	} else {
                    		this.$message.error(response.data.msg.info);
                    	}
                    })
                	} else {
                		this.$message.error(response.data.msg.info);
                	}
                })
              }
            }
          } else {
            vant.Toast(response.data.msg.info);
          }
        })
      },
      getyongjin:function(){
        axios.get('/agent/mycommission').then((response)=>{
          if (response.data.msg.code == 0) {
            this.yongjin = response.data.data
          } else {
            vant.Toast(response.data.msg.info);
          }
        })

        axios.get('/agent/mobile/count/info').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.info = response.data.data
        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },
      goguanli:function(){
        location.href = '/web/shangpinguanli/zaishoushangpin'
      },

      go4:function(url){
        axios.get('/agent/auth/user').then((response)=>{
        	if (response.data.msg.code == 0) {

           this.$router.push({
             path:url+'?shop_id=' + window.btoa(response.data.data.id),
           })

        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })

        // this.$router.push({
        //   path:url+location.search,
        // })
      },
      getinfo:function(){


        axios.get('/agent/auth/user').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.user = response.data.data
           localStorage.setItem('user',JSON.stringify(response.data.data))

           axios.get('/api/mstore/info?shop_id='+this.user.id).then((response)=>{
             if (response.data.msg.code == 0) {
               this.all = response.data.data
               if(this.all.json){
                 this.all.json = JSON.parse(this.all.json)
               }
               document.title = this.all.store_name
             } else {
               vant.Toast(response.data.msg.info);
             }
           })

        	}else {
            if(response.data.msg.code == 401){
              this.$router.push('/jiameng')
            }else{
              vant.Toast(response.data.msg.info);
            }

        	}
        })
        // 获取等级规则
        axios.get('/agent/level/ruleandcon').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.djrules = response.data.data

           // 获取个人等级
           axios.get('/agent/level/info').then((response)=>{
           	if (response.data.msg.code == 0) {
              if(response.data.data){
                this.dj = response.data.data

                this.djrules.condition.forEach(item=>{
                  if(item.level == this.dj.level+1){
                    this.nextexp = item.level_exp
                  }
                })
              }


              // this.djrules.condition.forEach(item=>{
              //   if(item.level <= this.dj.level+1){
              //     this.allexp = this.allexp + parseFloat(item.level_exp)
              //   }
              // })
              // this.nextexp = this.allexp - this.dj.exp

           	}else {
               vant.Toast(response.data.msg.info);
           	}
           })

        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })

      },

      onClickLeft:function(){
        this.$router.back(-2)
      },
      getinfo2:function(){
        let url = ""
        if(this.$route.query.shop_id){
          //那就是分销商的店铺
          url = '/api/mstore/info?shop_id='+window.atob(this.$route.query.shop_id)
        }else{
          //有shops_id就是页面
          if(this.$route.query.shops_id){
            url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`
          }else{
            //都没有就是管理员店铺
            url = '/api/mstore/info'
          }
        }

        // axios.get('/api/mstore/info?shop_id='+this.$route.query.shop_id).then((response)=>{
        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.alls = response.data.data
            if(this.alls.success != ''){
              this.alls.success = JSON.parse(this.alls.success)
            }
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
  }
</style>
